<!DOCTYPE html>
<html>
    <head>
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
    </head>
    <body>
        <div id="foo-1" class="foo"></div>
        <div id="foo-2" class="foo"></div>
        <div id="bar" class="bar"></div>
        <div id="live" class="live"></div>
        <div id="class-example">
            <p id="p1" class="aaa bbb"></p>
            <p id="p2" class="aaa ccc"></p>
            <p id="p3" class="bbb ccc"></p>
        </div>
        <script>
            var foo1 = document.getElementById("foo-1");
            var foo2 = document.getElementById("foo-2");
            var bar = document.getElementById("bar");
            var live = document.getElementById("live");
            var child = document.createElement("p");
            var p1 = document.getElementById("p1");
            var p2 = document.getElementById("p2");
            var p3 = document.getElementById("p3");

            var htmlcollection = null;

            test(function() {
                htmlcollection = document.getElementsByClassName("foo");
                assert_equals(htmlcollection.length, 2);
                assert_equals(htmlcollection.item(0), foo1);
                assert_equals(htmlcollection.item(1), foo2);
                assert_equals(htmlcollection.item(2), null);
                assert_equals(htmlcollection.namedItem("foo-1"), foo1);
                assert_equals(htmlcollection.namedItem("bar"), null);

                htmlcollection = document.getElementsByClassName("FOO");
                assert_equals(htmlcollection.length, 0);

                htmlcollection = document.getElementsByClassName("bar");
                assert_equals(htmlcollection.length, 1);
                assert_equals(htmlcollection.item(0), bar);
                assert_equals(htmlcollection.item(1), null);
                assert_equals(htmlcollection.namedItem("bar"), bar);
            }, "HTMLCollection interface");

            test(function() {
                htmlcollection = document.getElementsByClassName("live");
                assert_equals(htmlcollection.length, 1);
                assert_equals(htmlcollection.item(0), live);

                var new_live = document.createElement("div");
                new_live.className = "live";
                assert_equals(htmlcollection.length, 1);

                document.body.appendChild(new_live);
                assert_equals(htmlcollection.length, 2);
                assert_equals(htmlcollection.item(1), new_live);

                new_live.className = "dead";
                assert_equals(htmlcollection.length, 1);

                new_live.className = "live";
                assert_equals(htmlcollection.length, 2);

                document.body.removeChild(new_live);
                assert_equals(htmlcollection.length, 1);
            }, "live HTMLCollection byClassName");

            test(function() {
                var element = document.createElement("div");
                var coll = element.getElementsByTagName("div");
                assert_equals(coll.length, 0);

                element.innerHTML = '<div id="q1"><span id="q2">a</span><div id="q3">b</div><div id="q4">c</div></div>';
                assert_equals(coll.length, 3);

                var child = coll[0];
                var grandchild = coll[1];
                assert_equals(child.id, "q1");
                assert_equals(grandchild.id, "q3");
                assert_equals(grandchild.parentNode, child);
                assert_equals(child.parentNode, element);

                child.removeChild(grandchild);
                assert_equals(coll.length, 2);

                child.appendChild(grandchild);
                assert_equals(coll.length, 3);
            }, "live HTMLCollection byTagName");

            test(function() {
                var element = document.createElement("div");
                var coll = element.getElementsByTagName("div");
                assert_equals(coll.length, 0);

                element.innerHTML = '<div id="n0"><div id="n1"><div id="n2"></div><div id="n3"></div></div></div>';
                assert_equals(coll.length, 4);

                assert_equals(coll[3].id, "n3");
                assert_equals(coll[2].id, "n2");
                assert_equals(coll[2].id, "n2");
                assert_equals(coll[1].id, "n1");
                assert_equals(coll[2].id, "n2");
                assert_equals(coll[0].id, "n0");

                assert_equals(coll[0].id, "n0");
                assert_equals(coll[2].id, "n2");
                assert_equals(coll[1].id, "n1");
                assert_equals(coll[2].id, "n2");
                assert_equals(coll[3].id, "n3");

                assert_equals(coll.length, 4);

            }, "HTMLCollection cursoring");

            test(function() {
                assert_equals(document.getElementsByTagName("DIV").length, 5);

                assert_equals(document.getElementsByTagName("div").length,
                   document.documentElement.getElementsByTagName("div").length);

                assert_equals(document.getElementsByTagName("p").length,
                   document.getElementById("class-example").getElementsByTagName("p").length);
            }, "getElementsByTagName");

            test(function() {
                htmlcollection = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "div");
                assert_equals(htmlcollection.length, 5);

                var from_element = document.documentElement.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "div");
                assert_equals(htmlcollection.length, from_element.length);

                htmlcollection = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "DIV");
                assert_equals(htmlcollection.length, 0);

                htmlcollection = document.getElementsByTagNameNS("", "div");
                assert_equals(htmlcollection.length, 0);

                htmlcollection = document.getElementsByTagNameNS("invalid", "div");
                assert_equals(htmlcollection.length, 0);

                from_element = document.getElementById("class-example").getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "p");
                assert_equals(from_element.length, 3);
            }, "getElementsByTagNameNS");

            test(function() {
                htmlcollection = document.getElementsByClassName("aaa");
                assert_equals(htmlcollection.length, 2);
                assert_equals(htmlcollection.item(0), p1);
                assert_equals(htmlcollection.item(1), p2);

                htmlcollection = document.getElementsByClassName("ccc bbb");
                assert_equals(htmlcollection.length, 1);
                assert_equals(htmlcollection.item(0), p3);

                htmlcollection = document.getElementsByClassName("aaa,bbb");
                assert_equals(htmlcollection.length, 0);

                var from_element = document.getElementById("class-example").getElementsByClassName("bbb");
                assert_equals(from_element.length, 2);
                assert_equals(from_element.item(0), p1);
                assert_equals(from_element.item(1), p3);
            }, "document.getElementsByClassName");
        </script>
    </body>
</html>
